<template>
       <el-button type="primary" @click="opendata">新增</el-button>
       <el-table :data="tableData1" style="width: 100%" >
    <el-table-column label="#" width="55">
    <template v-slot="scope">
      {{ scope.$index + 1 }}  <!-- 自增数字，从1开始 -->
    </template>
  </el-table-column>
    <el-table-column  prop="bar_code" label="条码" />
    <el-table-column  prop="product_name" label="名称" />
    <el-table-column  prop="standard" label="规格" />
    <el-table-column  prop="model" label="型号" />
    <el-table-column  prop="name" label="类别" />
    <el-table-column  prop="unit" label="单位" />
  </el-table>
  <el-pagination
      v-model:current-page="form4.PageIndex"
      v-model:page-size="form4.PageSize"
      :page-sizes="[3,5,6]"

      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form4.PageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />


  <el-dialog v-model="form.isno" title="新增" width="500">
    <el-form :model="form">
        <el-form-item label="条码">
    <el-input v-model="form.bar_code" autocomplete="off">
      <template v-slot:suffix>
        <el-button 
          size="mini" 
          @click="searchBarcode" 
          type="text" 
          style="padding: 0; border: none; color: inherit;"
        >
          <el-icon style="vertical-align: middle">
            <Search />
          </el-icon>
        </el-button>
      </template>
    </el-input>
  </el-form-item>
      <el-form-item label="名称" >
        <el-input v-model="form.product_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="单位" >
        <el-input v-model="form.unit" autocomplete="off" />
      </el-form-item>
      <el-form-item label="多属性" >
        <el-input v-model="form.sku" autocomplete="off" />
      </el-form-item>
      <el-form-item label="采购价"  @change="gaibian">
        <el-input v-model="form.purchase_decimal" autocomplete="off" />
      </el-form-item>
      <el-form-item label="数量"  @change="gaibian1">
        <el-input v-model="form.MaterialNeedNum" autocomplete="off" />
      </el-form-item>
      <el-form-item label="费用" >
        <el-input v-model="form.MaterialNeedPrice" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" >
        <el-input v-model="form.remark" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="AddMaterial">保存</el-button>
      </div>
    </template>
  </el-dialog>




  <el-dialog v-model="form1.isno" title="选择商品" width="1200">
    <div>
    <el-form :model="form" label-width="auto"  style="width: 1000px;">
        <el-row :gutter="20" style="width: 700px;">
            <el-col :span="6"><div class="grid-content ep-bg-purple" />
                <el-form-item label="商品">
                <el-input v-model="form2.name" />
                </el-form-item>
            </el-col>
            <el-col :span="6" style="width: 700px;"><div class="grid-content ep-bg-purple" />
                <el-form-item label="类别：">
            <el-cascader style="width:300px" v-model="categoryId" @change="show" :options="data" :props="props1"
            :show-all-levels="false" clearable />
        </el-form-item>
            </el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" />
                <el-form-item>
                <el-button type="primary" @click="getTableData">查询</el-button>
                </el-form-item>
            </el-col>
        </el-row>
  </el-form>
            </div>
            <div>
                <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    
  >
    <el-table-column type="selection"  width="55" />
    <el-table-column  prop="bar_code" label="条码" />
    <el-table-column  prop="product_name" label="名称" />
    <el-table-column  prop="name" label="类别" />
    <el-table-column  prop="standard" label="规格" />
    <el-table-column  prop="model" label="型号" />
    <el-table-column  prop="model" label="颜色" />
    <el-table-column  prop="unit" label="单位" />
        <el-table-column  prop="sku" label="多属性" />
        <el-table-column  prop="current_number" label="库存" />
        <el-table-column prop="remark" label="扩展信息">
      <template #default="{ row }">
        <div class="ellipsis">{{ row.remark }}</div>
      </template>
    </el-table-column>
        <el-table-column  prop="enable_serial_number" label="序列号" />
     
  </el-table>
  
            </div> 
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="overFind">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>




<script lang="ts" setup>
    import { reactive, ref,onMounted } from 'vue'
    import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
    import { useRouter, useRoute } from 'vue-router'
    import axios from 'axios'
    const route = useRoute()
    const router = useRouter()
  import{GetMaterialCategoryTree} from '@/api/category/index'
    import {AddMaterialNeed,GetProductionBow,GetMaterialNeedById,MaterialNeedShow} from '@/api/production/index'
    import {type AddMaterialNeedInPut,type productionBom,type MaterialNeedData,type MaterialNeedShowData} from '@/api/production/type'
import { number } from 'echarts';


const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form=ref<AddMaterialNeedInPut>({
    isno:false,
    MaterialNeedId:null,
    productid:null,
    bar_code:'',
    product_name:'',
    standard:'',
    model:'',
    unit:'',
    sku:'',
    purchase_decimal:null,
    MaterialNeedNum:1,
    MaterialNeedPrice:null,
    remark:''
})
const props1 = {
  checkStrictly: true,
}
const form1=ref({
    isno:false,

})
const form2=ref<productionBom>({
    name:'',
    categoryid:null,
    PageIndex:1,
    PageSize:10

})
const form3=ref<MaterialNeedData>({
    productid:null,
    PageIndex:1,
    PageSize:10,
})
const gaibian=()=>{
    form.value.MaterialNeedPrice=form.value.purchase_decimal*form.value.MaterialNeedNum
}
const gaibian1=()=>{
    form.value.MaterialNeedPrice=form.value.purchase_decimal*form.value.MaterialNeedNum
}

onMounted(()=>{
    getData()
    getTableData()
    show()
    MaterialShowData()
}) 
const opendata=()=>{
    form.value.isno=true
}
const GetMaterialNeedByIdData = async () => {
  const aaString = localStorage.getItem("production");

  // 检查 aaString 是否存在
  if (aaString) {
    // 将字符串解析为数字
    const aa = Number(JSON.parse(aaString)[0]);

    try {
      // 确保 productid 是一个数字
      form3.value.productid = aa;

      const res = await GetMaterialNeedById(form3.value);
      console.log(res.data);
      form.value.bar_code=res.data.data[0].bar_code
      form.value.product_name=res.data.data[0].name
      form.value.sku=res.data.data[0].sku
      form.value.model=res.data.data[0].model
      form.value.standard=res.data.data[0].standard
      form.value.purchase_decimal=res.data.data[0].purchase_decimal
      
      form.value.remark=res.data.data[0].remark
      gaibian()
      gaibian1()
    } catch (error) {
      console.error("获取数据时出错:", error);
    }
  } else {
    console.log("没有找到生产数据");
  }
}
const AddMaterial=async()=>{
  const aaString = localStorage.getItem("zhuProductionid");
 
  form.value.productid=aaString;
 
    await AddMaterialNeed(form.value).then(function(res){
        console.log(res.data);
        if(res.data>0){
            form.value.isno=false;

        }
    })
}
const searchBarcode=()=>{
    form1.value.isno=true;
}
const categoryId = ref([])
const show = () => {

  if (categoryId.value != null) {
    form2.value.categoryid = categoryId.value[categoryId.value.length - 1]
    console.log(form2.value.categoryid);
   
    
  } else {
    form2.value.categoryid = null
  }
 
}
const data = ref([])
const getData = async () => {
  await GetMaterialCategoryTree().then(function (res) {
    console.log(res.data);
    
    data.value = res.data
  })
}
const tableData = ref([])
const getTableData = async () => {
 
  await GetProductionBow(form2.value)
    .then(res => {
      console.log(res.data.data)
      tableData.value = res.data.data
    })
}
const multipleSelection=ref([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
  console.log(val);
   const aa= multipleSelection.value.map((d:any)=>d.productid)
   console.log(aa.length);
   
    if(aa.length>1){
        ElMessage.error("只能选一个")
        return
    }
    localStorage.setItem("production", JSON.stringify(aa)); // 存储为 JSON 字符串
}



const overFind=()=>{
form1.value.isno=false;
GetMaterialNeedByIdData()
}
const tableData1=ref([])
const form4=ref<MaterialNeedShowData>({
  PageIndex:1,
  PageSize:10,
  PageTotal:0,
    PageCount:0,
    productionid:null
})
const MaterialShowData=async()=>{
  form4.value.productionid=localStorage.getItem("zhuProductionid")
  await MaterialNeedShow(form4.value).then(function(res){
    console.log(res.data);
    
    tableData1.value=res.data.data
    form4.value.PageCount=res.data.pageCount
    form4.value.PageTotal=res.data.pageTotal
  })

}
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  form4.value.PageSize=val;
  MaterialShowData()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  form4.value.PageIndex=val;
  MaterialShowData()
}

</script>

<style>
/* 可选的样式调整 */
.el-input .el-input__suffix {
  display: flex;
  align-items: center;
}
.ellipsis {
  white-space: nowrap;        /* 不换行 */
  overflow: hidden;           /* 超出部分隐藏 */
  text-overflow: ellipsis;   /* 使用省略号 */
  max-width: 100px;          /* 设置最大宽度，约等于10个字符 */
}
</style>